<template>
	<view class="page">
		<view class="content">
			<view class="video">
				<video class="video_item" :src="videoUrl" controls direction="-90"></video>
			</view>
			<view class="information">
				<text class="information_title">{{course.name}}</text>
				<text class="information_teacher">{{course.teacher}}</text>
			</view>
			<view class="list">
				<view class="list_title">
					点播列表
				</view>
				<view class="list_content">
					<view class="list_item" v-for="(item,index) in course.video" :key="index" @click="changeUrl(item.video)">
						第{{index+1}}课：{{item.name}}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				classId: '',
				videoUrl: 'cloud://inspace-v1.696e-inspace-v1-1302892928/course/courseVideo/有字幕.mp4',
				course: {
					name: '非洲鼓初级教程',
					teacher: '叶耀明',
					video: [
						{
							name: '非洲鼓初级教学',
							video: 'cloud://inspace-v1.696e-inspace-v1-1302892928/course/courseVideo/有字幕.mp4'
						}
					]
				}
			}
		},
		onLoad(option) {
			this.classId = option.classId;
			if(option.item){
				let course = JSON.parse(option.item);
				this.course = course;
				this.videoUrl = course.video[0].video;
			}
			// 获取视频的链接
			cloudbase.getTempFileURL({
				fileList: [this.videoUrl]
			}).then(res => {
				let list = res.fileList[0];
				this.videoUrl = list.tempFileURL;
			})
		},
		methods: {
			getVideoInformation: function() {
				
			},
			changeUrl:function(url){
				cloudbase.getTempFileURL({
					fileList: [url]
				}).then(res => {
					let list = res.fileList[0];
					this.videoUrl = list.tempFileURL;
				})
			}
		}
	}
</script>

<style>
	.page {
		width: 750rpx;
		height: 1334rpx;
		/* height: 1020rpx; */
		/* padding-bottom: 60px; */
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		background-color: #F3F5F7;
	}

	.content {
		width: 702rpx;
		height: 1334rpx;
		margin-top: 24rpx;
		margin-left: auto;
		margin-right: auto;
		background-color: #FFFFFF;
		border-radius: 32rpx 32rpx 0 0;
	}

	.video {
		width: 621rpx;
		height: 349rpx;
		margin-top: 40rpx;
		margin-left: auto;
		margin-right: auto;
	}

	.video_item {
		width: 621rpx;
		height: 349rpx;
	}

	.information {
		width: 621rpx;
		height: 56rpx;
		margin-top: 14rpx;
		margin-right: auto;
		margin-left: auto;
		line-height: 56rpx;
	}

	.information_title {
		float: left;
		font-size: 40rpx;
		font-weight: 600;
		color: #222222;
	}

	.information_teacher {
		float: right;
		font-size: 30rpx;
		color: #999999;
	}

	.list {
		width: 622rpx;
		height: 622rpx;
		margin-top: 76rpx;
		margin-left: auto;
		margin-right: auto;
		/* background-color:#121111; */
	}

	.list_title {
		width: 622rpx;
		height: 42rpx;
		font-size: 30rpx;
		line-height: 42rpx;
		font-weight: 600;
		color: #222222;
	}

	.list_content {
		width: 622rpx;
		height: 530rpx;
		/* background-color: #0000FF; */
	}

	.list_item {
		width: 622rpx;
		height: 66rpx;
		line-height: 66rpx;
		border-bottom: solid 1px #D7D7D7;
		font-size: 25rpx;
		color: #666666;
		user-select: none;
	}
</style>
